<template>
	<div class="search_nav">
		<div class="son clearfix">
			<a href="#" class="fl" :class="[{curr:active==index},activiti==index?item.clss:item.cls]"
				v-for="item,index in data" @click="change(index)" ref="icon">{{item.text}}
				<span class="icon"></span>
			</a>
		</div>
		<div class="son2">
			<div class="tit fl" v-for="val,index in nav" :class="{curr:activity==index+1}" @click="changer(index)" v-if="nav">
				<div class="tit1">{{val.text}}
					<span class="icon"></span>
				</div>
				<div class="tit1_son">
					<div class="nsd clearfix">
						<div class="fl" v-for="item,index in val.data3">
							{{item.text}}
						</div>
					</div>
					<div class="btm_choose clearfix">
						<div class="choose_cancel fl">
							重新选择
						</div>
						<div class="choose_sure fl">
							确定
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				activity: 0,
				activiti: 0,
				data: [{
					'text': '综合',
					'cls': 's1',
					'clss': 's01'
				}, {
					'text': '销量',
					'cls': 's2',
					'clss': 's02'
				}, {
					'text': '评价数',
					'cls': 's3',
					'clss': 's03'
				}, {
					'text': '价格',
					'cls': 's4',
					'clss': 's04'
				}, {
					'text': '筛选',
					'cls': 's5',
					'clss': 's05'
				}],
				nav: [
					// {
				// 		'text': '用途',
				// 		'son': ['全部', '爱情', '友情']
				// 	},
				// 	{
				// 		'text': '花材',
				// 		'son': ['全部', '爱2情']
				// 	},
				// 	{
				// 		'text': '对象',
				// 		'son': ['全部', '爱3情']
				// 	},
				// 	{
				// 		'text': '类型',
				// 		'son': ['全部', '爱4情']
				// 	}
				],
				num: 0, //销量
				evaluate: 0, //评价
				price: 0, //价格
				hidden: 0, //隐藏的
			}
		},
		async mounted() {
			let index=this.$route.query.id
			// console.log(index)
			let nav = await this.$http.get('sort/change',{
				id:index
			})
			if(nav.data.data.resu[0].data.length>=4){
				this.nav=nav.data.data.resu[0].data.splice(1,4)
			}else{
				this.nav =nav.data.data.resu[0].data
			}
			// console.log(this.nav)
		},
		methods: {
			change(index) {
				this.active = index;

				switch (index) {
					case 1:
						this.evaluate = 0
						this.price = 0
						if (this.num == 0) {
							this.activiti = index;
							this.num = 1
						} else {
							this.activiti = -1;
							this.num = 0
						}
						break;
					case 2:
						this.num = 0
						this.price = 0
						if (this.evaluate == 0) {
							this.activiti = index;
							this.evaluate = 1
						} else {
							this.activiti = -1;
							this.evaluate = 0
						}
						break;
					case 3:
						this.evaluate = 0
						this.num = 0
						if (this.price == 0) {
							this.activiti = index;
							this.price = 1
						} else {
							this.activiti = -1;
							this.price = 0
						}
						break;
					default:
						this.evaluate = 0;
						this.num = 0;
						this.price = 0;
						break;
				}
				console.log(index)

			},
			changer(index) {
				switch (index) {
					case 0:
						if (this.hidden == 0) {
							this.activity = index + 1
							this.hidden = 1
						} else {
							this.activity = index
							this.hidden = 0
						}
						break;
					case 1:
						if (this.hidden == 0) {
							this.activity = index + 1
							this.hidden = 1
						} else {
							this.activity = 0
							this.hidden = 0
						}
						break;
					case 2:
						if (this.hidden == 0) {
							this.activity = index + 1
							this.hidden = 1
						} else {
							this.activity = 0
							this.hidden = 0
						}
						break;
					case 3:
						if (this.hidden == 0) {
							this.activity = index + 1
							this.hidden = 1
						} else {
							this.activity = 0
							this.hidden = 0
						}
						break;
				}
			}
		}
	}
</script>

<style>
	.search_nav {
		line-height: 40px;
		height: 40px;
		border-top: 1px solid #ddd;
		background-color: #fff;
		z-index: 5;
		position: fixed;
		border-bottom: 1px solid #ddd;
		left: 0;
		width: 100%;
		top: 3.4375rem;
	}

	.search_nav .son {
		line-height: 40px;
	}

	.search_nav .son a.curr {
		color: #FF3333;
	}

	.search_nav .son a {
		width: 20%;
		text-align: center;
		font-size: 0.875rem;
		margin: 0;
		padding: 0;
	}

	.search_nav .son a .icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-image: url(../../../assets/imgs/icon6.png);
		vertical-align: middle;
	}

	.search_nav .son .s1 .icon {
		width: 0;
		height: 0;
		display: none;
	}

	.search_nav .son .s01 .icon {
		width: 0;
		height: 0;
		display: none;
	}

	.search_nav .son .s2 .icon {
		background-position: -8px -53px;
	}

	.search_nav .son .s02 .icon {
		background-position: -8px -53px;
	}

	.search_nav .son .s3 .icon {
		background-position: -8px -53px;
	}

	.search_nav .son .s03 .icon {
		background-position: -8px -53px;
	}

	.search_nav .son .s4 .icon {
		background-position: -8px -53px;
	}

	.search_nav .son .s04 .icon {
		background-position: -8px -53px;
	}

	.search_nav .son .s5 .icon {
		background-position: -117px -53px;
	}

	.search_nav .son .s05 .icon {
		background-position: -117px -53px;
	}

	.search_nav .son .s01.curr .icon {
		display: none;
	}

	.search_nav .son .s02.curr .icon {
		background-position: -48px -53px;
	}

	.search_nav .son .s03.curr .icon {
		background-position: -48px -53px;
	}

	.search_nav .son .s04.curr .icon {
		background-position: -48px -53px;
	}

	.search_nav .son .s05.curr .icon {
		background-position: -117px -53px;
	}

	.search_nav .son .s1.curr .icon {
		display: none;
	}

	.search_nav .son .s2.curr .icon {
		background-position: -28px -53px;
	}

	.search_nav .son .s3.curr .icon {
		background-position: -28px -53px;
	}

	.search_nav .son .s4.curr .icon {
		background-position: -28px -53px;
	}

	.search_nav .son .s5.curr .icon {
		background-position: -117px -53px;
	}

	.search_nav .son2 {
		/* height: 40px; */
		/* line-height: 40px; */
		width: 100%;
		border-top: 1px solid #ddd;
		background-color: #fff;
		padding: 10px 0;
		position: relative;
		/* line-height: 40px; */
		display: flex;
		justify-content: space-around;
	}

	.son2 .tit {
		width: 22.5%;
		text-align: center;
		background-color: #EBECEE;
		border-radius: 1.125rem 1.125rem;
		font-size: 0.75rem;
		overflow: hidden;
	}

	.son2 .tit .tit1 {
		height: 30px;
		color: rgb(102, 102, 102);
		font-weight: 400;
		text-align: center;
		line-height: 30px;
	}

	.tit1 .icon {
		text-align: center;
		display: inline-block;
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-image: url(../../../assets/imgs/icon6.png);
		vertical-align: middle;
		background-position: -72px -58px;
	}

	.tit1_son {
		position: absolute;
		top: 2.5rem;
		left: 0;
		width: 100%;
		z-index: 10;
		background-color: #EBECEE;
		line-height: 35px;
		border-radius: 0 0 10px 10px;
	}

	.tit1_son .nsd div {
		width: 30.333%;
		margin-left: 2%;
		text-align: left;
		line-height: 45px;
		color: rgb(102, 102, 102);
		font-weight: 400;
		height: 45px;
	}

	.son2 .tit .tit1_son {
		display: none;
	}

	.son2 .tit.curr .tit1_son {
		display: block;
	}

	.son2 .tit.curr {
		border-radius: 1.25rem 1.25rem 0 0;
	}
	.son2 .tit .btm_choose div {
		width: 50%;
		line-height: 55px;
		height: 55px;
	}

	.btm_choose .choose_cancel {
		background-color: #fff;
		color: #000;
		border-radius: 0 0 0 0.6rem;
	}

	.btm_choose .choose_sure {
		background-color: #AC976B;
		color: #fff;
		border-radius: 0 0 0.6rem 0;
	}
</style>
